<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>哈哈</div>
    <script>
        // Map ES6新增数据结构，是无序的类似于对象,键不仅限于字符串，可以是任意数据类型
        // Map：构造函数（实例化方式创建map数据结构）

        // 对象缺陷：属性名(键)只能是字符串
        let div = document.getElementsByTagName("div")[0];
        console.log(div.toString()); //'[object HTMLDivElement]' object->是一个对象  HTMLDivElement:div属于HTMLDivElement

        let obj = {
            name: "哈哈",
            "age": 100,
            66: 101,
            [div]: '我是div'
        };


        //div作为对象的键，自动转为了字符串
        console.log(obj); //{66: 101, name: '哈哈', age: 100, [object HTMLDivElement]: '我是div'}
        // console.log(obj.toString());//'[object Object]'  



        // 语法: new Map([[key,val],[key,val],...]);

        //没有传递参数
        let map1 = new Map();
        console.log(map1);

        let map2 = new Map([['name','swk'],[1,'字符串'],[true,'布尔数据类型']]);
        console.log(map2); //Map(3) {'name' => 'swk', 1 => '字符串', true => '布尔数据类型'}


        /*
            - size  获取Map的长度
            - set(key,val)  添加一条数据，返回一个新map数据结构，原来map数据结构修改
            - get(key)  根据key获取val
            - has(key)  是否存在key，返回一个布尔值
            - delete(key) 删除某条数据,返回一个布尔值
            - clear() 清空所有数据，么有反回值
        */

        console.log(map2.size); //3
        console.log(map2.set(false,'布尔')); 
        console.log(map2); 
        console.log(map2.get(1));
        console.log(map2.get(true));

        console.log(map2.has(true)); //true
        console.log(map2.delete(true)); //true
        console.log(map2.delete(2)); //false

        map2.clear(); 
        console.log(map2); 

    </script>
</body>

</html>